@import './base.css';
@import 'md/theme.css';
@import 'table.css';
@import 'dialog.css';

:root,
body,
#app {
  height: 100%;
  width: 100%;
}

:root {
  font-family: var(--md-sys-typescale-body-medium-font-family-name);
  font-style: var(--md-sys-typescale-body-medium-font-family-style);
  font-weight: var(--md-sys-typescale-body-medium-font-weight);
  font-size: var(--md-sys-typescale-body-medium-font-size);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  line-height: var(--md-sys-typescale-body-medium-height);
  text-transform: var(--md-sys-typescale-body-medium-text-transform);
  text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
  --navigation-drawer-padding: 12px;
  --navigation-drawer-normal-width: 56px;
  --navigation-drawer-expanded-width: 240px;
}

#app {
  background-color: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.teleport-view {
  z-index: 0;
  position: relative;
  grid-row-start: 2;
  grid-row-end: 4;
  grid-column-start: 1;
  grid-column-end: 3;
}